// 全部订单切换
// 获取父级的item
const allAs = document.querySelectorAll('.item')
// 获取下面盒子的 order-list
const orderLists = document.querySelectorAll('.orderList .order-list')

for (let i = 0; i < allAs.length; i++) {
    allAs[i].addEventListener('click', function (e) {
        const targetall = e.target
        if (targetall.tagName === "A") {
            let items = allAs[i].querySelector('a.active')
            if (items) {
                items.classList.remove('active')
            }
            targetall.classList.add('active')    
        }
    })
}

// // 显示登录的用户名
// // 1.获取localStorage中的用户名数据, 根据用户名数据是否存在, 渲染界面
// const uname = localStorage.getItem('username')
// const li1 = document.querySelector('.xtx_navs li:nth-child(1)')
// const li2 = document.querySelector('.xtx_navs li:nth-child(2)')
// if (uname) {
//     li1.innerHTML = `<a href="./my-order.html"><i class="iconfont icon-user">${uname}</i></a>`
//     li2.innerHTML = `<a href=">退出登录</a>`
// } else {
//     li1.innerHTML = `<a href="#">请先登录</a>`
//     li2.innerHTML = `<a href="#">免费注册</a>`
// }
// // 2.实现退出登录效果
// // 找到退出登录的a标签
// li2.addEventListener('click', function () {
//     localStorage.removeItem('username')
//     location.reload(true)
// })

// 评价页码点击模块
const ul = document.querySelector('.xtx-folio ul');
ul.addEventListener('click', function (e) {
    if (e.target.tagName === 'LI') {
        if (!e.target.dataset.folio) {
            document.querySelector('.xtx-folio ul li.active').classList.remove('active');
            e.target.classList.add('active');
            e.target.style.color = '';
        }
    }
});
// 评价页码模块鼠标移入变色
ul.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'LI') {
        e.target.style.color = '#27ba9b';
    }
});
// 评价页码模块鼠标移出变色
ul.addEventListener('mouseout', function (e) {
    if (e.target.tagName === 'LI') {
        e.target.style.color = '';
    }
})

// 点击下一页切换页数
// 获取里面的每个小li
const page = document.querySelectorAll('.xtx-folio ul li')
// 获取最后一个li
const folio_1 = document.querySelector('.xtx-folio ul li:last-child')
// 获取第一个li
const folio_2 = document.querySelector('.xtx-folio ul li:first-child')
let i = 1
// 给最后一个小li绑定点击事件
folio_1.addEventListener('click', function () {
    i++
    if (i > 5) {
        i = 5
    }
    if (!page[i].dataset.folio) {
        document.querySelector('.xtx-folio ul li.active').classList.remove('active');
        page[i].classList.add('active');
        page[i].style.color = '';
    }
})
// 给第一个li绑定点击事件
folio_2.addEventListener('click', function () {
    i--
    if (i < 1) {
        i = 1
    }
    if (!page[i].dataset.folio) {
        document.querySelector('.xtx-folio ul li.active').classList.remove('active');
        page[i].classList.add('active');
        page[i].style.color = '';
    }
})


